/*轮播图*/
/*第一个参数是包装ul的盒子，保证其宽与li相同*/
/*第二个是轮播图的ul*/
/*第二个是小图标的ul*/
var banner = document.querySelector('.xc_header');
var imageBox = banner.querySelector('ul.images');
var pointBox = banner.querySelector('ul.icon');
imgscrool(banner,imageBox,pointBox);

function imgscrool(banner,imageBox,pointBox){
    var w = banner.offsetWidth;
	var lis = banner.querySelectorAll('li');
	var len = lis.length;
    var points = pointBox.querySelectorAll('li');

    /*添加过渡*/
    var addTransition = function () {
        imageBox.style.webkitTransition = "all .2s";/*兼容*/
        imageBox.style.transition = "all .2s";
    };
    /*删除过渡*/
    var removeTransition = function () {
        imageBox.style.webkitTransition = "none";/*兼容*/
        imageBox.style.transition = "none";
    };
    /*改变位子*/
    var setTranslateX = function(translateX){
        imageBox.style.webkitTransform = "translateX("+translateX+"px)";
        imageBox.style.transform = "translateX("+translateX+"px)";
    };


    /*1.自动的滚动起来    （定时器，过渡）*/
    var index = 1;
    var timer = setInterval(function(){
        index  ++ ;
        addTransition();
        setTranslateX(-index*w);
        /*小标ul*/
		setPoint();
    },3000);

    /*2.绑定一个过渡结束事件*/
   imageBox.addEventListener('webkitTransitionEnd',function(){
        if(index >= len-1){
            index = 1;
            removeTransition();
            setTranslateX(-index*w);
        }else if(index <= 0){
            index = len - 2;
            removeTransition();
            setTranslateX(-index*w);
        }
   });

    var setPoint = function(){
        for(var i = 0 ; i < points.length ; i ++){
            points[i].className = " ";
        }
		if(index>=7){
			points[0].className = "now";
		}else if(index<=0){
			points[5].className = "now";
		}else{
			points[index-1].className = "now";
		}
        
    }

    /*3.图片滑动 touch事件）*/
    var startX = 0;
    var moveX = 0;
    var distanceX = 0;
    var isMove = false;

    imageBox.addEventListener('touchstart',function(e){
        clearInterval(timer);
        startX = e.touches[0].clientX;
    });
    imageBox.addEventListener('touchmove',function(e){
        isMove = true;
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        var currX = -index*w + distanceX;
        removeTransition();
        setTranslateX(currX);
    });
    imageBox.addEventListener('touchend',function(e){
        if(isMove && (Math.abs(distanceX) > w/30)){
            if(distanceX > 0){
                index --;
            }else{
                index ++;
            }
            addTransition();
            setTranslateX(-index * w);
            setPoint();
        }
        else {
            addTransition();
            setTranslateX(-index * w);
        }
        /*重置*/
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;

        clearInterval(timer);
        timer = setInterval(function(){
            index  ++ ;
            addTransition();
            setTranslateX(-index*w);
			setPoint();
        },3000);
    });
}